<template>
  <div>
    <ul>
      <li v-for="message in messageList" :key="message.id">
       <!-- 传参的第一种写法：to字符串写法 -->
      <!-- <router-link :to="`/home/message/detail/${message.id}/${message.title}/${message.content}`">{{message.title}}</router-link> -->
      
       <!-- 传参的第二写法：to对象写法 -->
      <router-link 
        :to="{
          name:'xiang',
          query:{
            id:message.id,
            title:message.title,
            content:message.content
          }
        }"
      >
        {{message.title}}
      </router-link>
      </li>
    </ul>
    <hr>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name:'Message',
    data() {
      return {
        messageList:[
          {id:'asdsa01',title:'中国移动话费通知！',content:'您的余额不足，请及时缴费'},
          {id:'asdsa02',title:'恭喜，您称为幸运用户！',content:'点击下方链接领取奖励'},
          {id:'asdsa03',title:'来自缅北的问候！',content:'诚邀您贡献您各种器官'}
        ]
      }
    },
    mounted() {
      console.log('Message-mounted')
    },
    destroyed() {
      console.log('Message-destroyed')
    },
  }
</script>